<template>
  <div class="deal-order my-issue">
    <uni-nav-bar @clickLeft="$ui.back()" dark color="#FFD76B" backgroundColor="#323232" background-color="#007AFF"
      left-icon="left" status-bar title="我的发布" />

    <div class="my-deal-header">
      <div class="deal-type" @click="changeHead(1)" :style="type == 1 ? 'color:#ffffff' : ''">出售</div>
      <div class="deal-type" @click="changeHead(2)" :style="type == 2 ? 'color:#ffffff' : ''">购买</div>
      <div class="deal-bg" :class="headerClass"></div>
    </div>
    <div class="top-bg" :style="{paddingTop: statusBarHeight+25 +'px'}"></div>
    <div class="order-item" v-for="(item,index) in list" :key="index">
      <div class="flex-between-center item-top">
        <div class="item-name van-ellipsis">{{item.user}}</div>
        <image :src="item.level_logo" mode="" class="item-level"></image>
      </div>
      <div class="item-number">数量：<span class="number-width font-family-din van-ellipsis">{{item.initial_num}}</span>
        <span class="margin-left">YKB</span>
      </div>
      <div class="item-number">当前数量：<span
          class="all-price number-width font-family-din van-ellipsis">{{item.num}}</span> <span
          class="margin-left">YKB</span></div>
      <div class="item-number">单价：<span class="number-width font-family-din van-ellipsis">{{item.price}}</span> <span
          class="margin-left">CYN</span></div>
      <div class="item-number">总价：<span class="number-width font-family-din van-ellipsis">{{item.total_price}}</span>
        <span class="margin-left">CYN</span>
      </div>
      <div class="item-time">发布时间:{{item.start_time}}</div>
      <div class="item-pay-img">
        <image :src="item == 1 ? alipayImg : item == 2 ? wechatImg : item == 3 ? bankImg : item == 4 ? usdtImg : ''"
          class="pay-img" v-for="(item,index) in item.paymant" :key="index"></image>
      </div>
      <div>
        <u-button class="van-btn-no van-btn-loading-pp" v-if="item.status == 0">正在匹配…</u-button>
        <u-button v-if="item.status == 0" @click="cancelOrder(item)">取消发布</u-button>
        <u-button v-if="item.status == 1 && type == 2" @click="goDetail(item)">上传支付凭证</u-button>
        <u-button class="van-btn-no van-btn-other" v-if="item.status == 2 && type == 2" @click="goDetail(item)">
          等待对方确认…</u-button>
        <u-button v-if="item.status == 2 && type == 1" @click="goDetail(item)">确认支付凭证</u-button>
        <u-button class="van-btn-no vvan-btn-other" v-if="item.status == 1 && type == 1" @click="goDetail(item)">
          等待上传凭证…</u-button>
        <u-button class="van-btn-no van-btn-loading-pp" v-if="item.status == 3">已完成</u-button>
        <u-button class="van-btn-no van-btn-loading-pp" v-if="item.status == 7">已取消</u-button>
        <u-button class="van-btn-no van-btn-appeal" v-if="item.status == 4">申诉中…</u-button>
        <u-button class="van-btn-no van-btn-appeal-success" v-if="item.status == 5">申诉成功</u-button>
        <u-button class="van-btn-no van-btn-appeal" v-if="item.status == 6">申诉失败</u-button>
      </div>
    </div>
  </div>
</template>

<script>
  import {
    getMydealList,
    putCancelOrder
  } from '@/api/deal/index.js'
  export default {
    data() {
      return {
        alipayImg: require('@/assets/deal/alipay.png'),
        wechatImg: require('@/assets/deal/wechat.png'),
        bankImg: require('@/assets/deal/bank.png'),
        usdtImg: require('@/assets/deal/usdt.png'),
        type: 1,
        tabList: ['进行中', '已完成'],
        headerClass: '',
        page: 1,
        list: [],
        loading: false,
        finished: false,
        statusBarHeight: 0
      }
    },
    created() {
      this.statusBarHeight = uni.getSystemInfoSync()['statusBarHeight'] + 5;
      // if (this.$cookie.get('headType')) {
      //   this.type = this.$cookie.get('headType')
      //   if (this.type == 1) {
      //     this.headerClass = 'type-active-1'
      //   } else {
      //     this.headerClass = 'type-active-2'
      //   }
      // }
      this.getInfo()
    },
    type(val) {
      this.onRefresh()
    },
    methods: {
      backClick() {
        uni.navigateBack()
      },
      getInfo() {
        let vm = this
        getMydealList({
          page: vm.page,
          type: vm.type,
          status: 1
        }).then(res => {
          vm.getInfoBack(res)
        })
      },
      getInfoBack(res) {
        let vm = this
        vm.loading = true
        if (res.code == 1) {
          let list = res.data.list
          vm.list = [...vm.list, ...list]
          if (vm.page < res.data.pages) {
            vm.page++;
          } else {
            vm.finished = true
          }
        }
      },
      onRefresh() {
        this.page = 1
        this.list = []
        this.finished = false
        this.getInfo()
      },
      changeHead(index) {
        this.type = index
        if (index == 1) {
          this.headerClass = 'type-active-1'
        } else {
          this.headerClass = 'type-active-2'
        }
        this.onRefresh()
      },
      cancelOrder(item) {
        let vm = this
        this.$ui.show('提示', '确认取消').then(res => {
          if (res.confirm) {
            putCancelOrder({
              id: item.id,
              type: vm.type
            }).then(res => {
              if (res.code == 1) {
                vm.$ui.toast(res.msg)
                vm.onRefresh()
              }
            })
          }
        })

      },
      goDetail(item) {
        let vm = this
        if (item.status == 1 || item.status == 2) {
          this.$ui.push('/pages/deal/deal_info?id=' + item.id)
        } else {

        }
      },
    }
  }
</script>

<style lang="less" scoped>
  .my-issue {
    background: #f2f2f2;

    .order-item:nth-child(n) {
      // margin-top: 60px;
    }

    .all-price {
      font-size: 28px;
    }

    .item-time {
      position: static;
      margin-top: 22px;
      transform: translateY(0);
    }

    .van-list {
      padding-top: 0.53rem;
    }
  }

  .deal-order {}

  .item-level {
    width: 30rpx !important;
    height: 30rpx !important;
  }
</style>

<style lang="less">
  .my-deal {}
</style>
